一、设计图，来自于ui提供的蓝湖地址

	https://share.lanhuapp.com/#/invite?sid=lxtOT90a
	分享人: 41238206
	蓝湖团队: 小鹿线团队的团队
	相关项目: 学习平台-APP
	链接有效期: 20221116~20221130

二、框架选型：uniapp

	一套代码生成多端(但是需要写大量的条件编译)

三、布局单位

	rpx 即响应式 px

	设计图是750，测量出来比如是330px，那么写代码就是330rpx就可以了，很方便

四、接口地址

	链接：http://doc.xuexiluxian.cn/
	用户名：testapi
	密码：123456

	url地址：http://testapp.xuexiluxian.cn/

五、请求二次封装和api解耦
	
	5.1 为什么要做？

		让请求好维护，好管理===》方便

	5.2 封装步骤

		根目录新建: utils/request.js
		main.js
			// 引入请求封装，将app参数传递到配置中
			require('./utils/request.js')(app)
		api解耦

		参考链接：https://www.uviewui.com/js/http.html
		
六、插件

	6.1 ui框架：uView2.x

		1. npm install uview-ui@2.0.31
			***国内镜像

		2. main.js

			import uView from "uview-ui";
			Vue.use(uView);
		3. uni.scss
			@import 'uview-ui/theme.scss';

		4. pages.json
		
			{
				"easycom": {
					"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
				},
				
				// 此为本身已有的内容
				"pages": [
					// ......
				]
			}
	6.2 aes加密
		
		cnpm i crypto-js -S

	6.3 Vuex持久化存储插件

		参考链接：https://www.xuexiluxian.cn/blog/detail/dae4073b07144d3c9abb3e2cc8495922


七、混入

	7.1 什么是混入

		类似于全局方法（工具类:utils)差不多，但是混入的this是可以使用的（指向组件this:vueComponent）

	7.2 在什么地方去用？

		混入是一个全局方法：比如某一个功能在很多组件和很多页面都会使用，那么就可以用混入封装起来来调用使用

		课程的等级和人数的显示都可以用混入

八、登录的用户名和密码
	
	用户名：test
	密码：123456

	
	1. 后端会给前端返回用户的token
	2. 前端会把token值进行存储

		Vuex中
		本地存储中[持久化存储]

	3. 返回到我的页面，进行接口调用==》获取用户信息的内容

	4. 会把获取的用户信息，进行vuex和持久化存储

		***只要登录了，下次在进入项目中，也是一个登录状态	


九、uniapp导航守卫

	注意：uniapp不自带导航守卫
	解决：需要使用插件

		9.1 执行安装命令

			npm install uni-simple-router
			npm install uni-read-pages

		9.2 在项目根目录新建vue.config.js文件

			//vue.config.js
			const TransformPages = require('uni-read-pages')
			const {webpack} = new TransformPages()
			module.exports = {
				configureWebpack: {
					plugins: [
						new webpack.DefinePlugin({
							ROUTES: webpack.DefinePlugin.runtimeValue(() => {
								const tfPages = new TransformPages({
									includes: ['path', 'name', 'aliasPath']
								});
								return JSON.stringify(tfPages.routes)
							}, true )
						})
					]
				}
			}

		9.3 在项目根目录新建router.js文件

			// router.js
			import {RouterMount,createRouter} from 'uni-simple-router';

			const router = createRouter({
				platform: process.env.VUE_APP_PLATFORM,  
				routes: [...ROUTES]
			});
			//全局路由前置守卫
			router.beforeEach((to, from, next) => {
				next();
			});
			// 全局路由后置守卫
			router.afterEach((to, from) => {
			    console.log('跳转结束')
			})

			export {
				router,
				RouterMount
			}

		9.4 在main.js文件中导入插件

			import App from './App'
			import store from '@/store'

			//导航守卫
			import {router,RouterMount} from './router.js'  //路径换成自己的
			Vue.use(router)


			// #ifndef VUE3
			import Vue from 'vue'
			Vue.config.productionTip = false
			App.mpType = 'app'
			const app = new Vue({
				store,
			    ...App
			})
			app.$mount()
			// #endif

			import uView from "uview-ui";
			Vue.use(uView);

			// 引入请求封装，将app参数传递到配置中
			require('./utils/request.js')(app)

			// #ifdef VUE3
			import { createSSRApp } from 'vue'
			export function createApp() {
			  const app = createSSRApp(App)
			  return {
			    app
			  }
			}
			// #endif


			//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
			// #ifdef H5
				RouterMount(app,router,'#app')
			// #endif

			// #ifndef H5
				app.$mount(); //为了兼容小程序及app端必须这样写才有效果
			// #endif





